// import {LitElement, PropertyValues, ReactiveElement} from "lit";

export const ElementSizes = {
    xxs: 'xxs',
    xs: 'xs',
    s: 's',
    m: 'm',
    l: 'l',
    xl: 'xl',
    xxl: 'xxl',
};

export const SizedMixin = (superClass,
                           {validSizes, noDefaultSize, defaultSize} = {
                               validSizes: ['s', 'm', 'l', 'xl'],
                               noDefaultSize: false,
                               defaultSize: 'm'
                           }) => class SizedElement extends superClass {
    _size = defaultSize;
    static properties = {
        size: {
            type: String,
            reflect: true,
        }
    }

    get size() {
        return this._size || defaultSize;
    }

    set size(value) {
        const fallbackSize = noDefaultSize ? null : defaultSize;
        const size = value ? value.toLocaleLowerCase() : value;
        const validSize = validSizes.includes(size) ? size : fallbackSize;
        if(this._size === validSize) {
            return;
        }
        const oldSize = this._size;
        this._size = validSize;
        this.requestUpdate('size', oldSize);
    }

    /**
     * override
     * @param changes
     */
    update(changes) {
        if(!this.hasAttribute('size') && !noDefaultSize) {
            this.setAttribute('size', this.size);
        }
        super.update(changes);
    }
}
